<template>
<div id="wrapper">
  <HeaderThree :desc="sp"></HeaderThree>
  <!--轮播图-->
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><img :src="productDetail.img" alt=""></div>
      <div class="swiper-slide"><img :src="productDetail.img" alt=""></div>
      <div class="swiper-slide"><img :src="productDetail.img" alt=""></div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
  </div>
  <!--抢购时间-->
  <div id="snapTime-container" >
    <div class="snapTime" v-if="getIsPrice">
      <span>抢购价:¥{{productDetail.price}}</span>
      <span>{{time}}</span>
      <span>提醒我</span>
    </div>
    <div class="snapTime" v-else>
      <span>还剩下{{productDetail.surplus}}件, 再不抢购就没有了</span>
    </div>
  </div>

  <div id="price">

    <div class="detail" >
      <img :src="productDetail.addressImg" alt="">
      <span id="font-red">{{productDetail.address}}</span>
      <span>{{productDetail.name}}</span>
    </div>
    <p id="oldPrice">¥{{productDetail.price}}</p>
    <p id="tariffs">关税 : ¥10 <span @click="server()">详情 > </span></p>
    <p id="postage">邮费 : ¥50</p>
  </div>
  <div id="integral">
    <div id="integral-title">
      <img src="../../assets/shortProduct/productDetail/jifengou.png" alt="">
      <span>5000000积分可抵500元, 限购一件</span>
    </div>
  </div>
  <div id="conditions">
    <ul id="conditions-title">
      <li id="conditions-no-support">
        <img src="../../assets/shortProduct/productDetail/nosupport.png" alt="">
        <span>不支持7天无忧退款</span>
      </li>
      <li id="conditions-directMail">
        <img src="../../assets/shortProduct/productDetail/fly.png" alt="">
        <span>海外直邮</span>
      </li>
      <li id="conditions-ensure">
        <img src="../../assets/shortProduct/productDetail/zhengpin.png" alt="">
        <span>正品保证</span>
        <span id="more" @click="server()"> > </span>
      </li>
    </ul>
  </div>
  <div id="address">
    <div id="address-title">
      <img src="../../assets/shortProduct/productDetail/england.png" alt="">
      <span>直邮, 下单时需要提供真实姓名和身份证号码以及收货地址请先去添加并填写这些信息</span>
      <span id="toAdd">去添加</span>
    </div>
  </div>
  <div id="tian-f">
  </div>
  <div id="a-la-fen">
    <div id="a-la-fen-head">
      <div id="a-la-fen-title">
        <span id="alTitle">阿拉粉心得</span>
        <span id="alaMore" @click="allTips()">查看更多 > </span>
      </div>
    </div>
    <ul id="discuss">
      <li v-for="obj in discuss">
        <span class="discuss-content">{{obj.content}}</span>
        <div class="discuss-bottom">
          <img :src="obj.headImg" alt="">
          <span>{{obj.name}}</span>
        </div>
      </li>
    </ul>
    <div class="tian-f-two"></div>
    <div id="brand">
      <ul id="brand-ul">
        <li><img src="../../assets/shortProduct/productDetail/brandlogo.png" alt=""></li>
        <li>
          <span id="brand-title">{{productDetail.brand}}</span>
          <span id="brand-name">英国最大彩妆品牌</span>
          <p id="brand-view-goods" @click="brandView">查看<span id="brand-num">10</span>件商品</p>
        </li>
        <li id="focusOn">
          <span id="focusOn-jia">+</span>
          <span>关注</span>
        </li>
      </ul>
      <div id="brand-detail">
        这是一个很好的品牌,快来使用把这是一个很好的品牌,快来使用把这是一个很好的品牌,快来使用把这是一个很好的品牌,快来使用把
      </div>
    </div>
    <ul id="pushGoods">
      <li class="pushGoods-li" v-for="obj in pushGoods">
        <img :src="obj.img" alt="">
        <p class="pushGoods-name">{{obj.name}}</p>
        <p class="pushGoods-price">¥{{obj.price}}</p>
      </li>
    </ul>
  </div>
  <div class="tian-f-two"></div>
  <ul id="productKinds">
    <li id="product-detail">
      <h3 id="product-detail-title">商品描述</h3>
      <div id="product-detail-content">
        你是个商品名,千万不要来买啊,太垃圾了了,你是个商品名,千万不要来买啊,太垃圾了了,你是个商品名,千万不要来买啊,太垃圾了了,你是个商品名,千万不要来买啊,太垃圾了了,你是个商品名,千万不要来买啊,太垃圾了了
      </div>
    </li>
    <li id="product-method">
      <h3 id="product-method-title">使用方法</h3>
      <div id="product-method-content">
        <p>1.你是个大傻帽,不要看就是说你呢</p>
        <p>2.班里面太热了</p>
        <p>3.冷灯看剑,剑上几番功名,炉香何须计苍生.纵一川烟逝,万丈云埋,孤阳还照古陵.</p>
      </div>
    </li>
    <li>
      <h3 id="productImgs">商品图片</h3>
      <div class="productShow" v-for="imgs in productShow">
        <img :src="imgs.img" alt="">
      </div>
    </li>
  </ul>
  <div class="tian-f-two"></div>
  <div id="alaBuyP">
    <h3 id="alaBuy">阿拉粉在买</h3>
    <ul id="a-la-fen-buy">
      <li class="pushGoods-li" v-for="obj in pushGoods">
        <img :src="obj.img" alt="">
        <p class="pushGoods-name">{{obj.name}}</p>
        <p class="pushGoods-price">¥{{obj.price}}</p>
      </li>
    </ul>
  </div>
  <div class="tian-f-two"></div>
  <div id="server">
    <h3 id="server-cn">服务承诺</h3>
    <div id="server-line">
      <ul id="server-ensure">
        <li><img src="../../assets/shortProduct/productDetail/zhengpin1.png" alt="">
          <p class="pushGoods-name">正品保证</p>
        </li>
        <li><img src="../../assets/shortProduct/productDetail/fly1.png" alt="">
          <p class="pushGoods-name">海外直邮</p></li>
        <li>
          <img src="../../assets/shortProduct/productDetail/bu.png" alt="">
          <p class="pushGoods-name">超时发货补贴</p>
        </li>
        <li>
          <img src="../../assets/shortProduct/productDetail/picc.png" alt="">
          <p class="pushGoods-name">PICC承保</p>
        </li>
      </ul>
    </div>
  </div>
  <div id="smallTips">
    <div id="tips">
      <img src="../../assets/shortProduct/productDetail/tips.png" alt="">
    </div>
    <div id="smallTips-contnet">
      <p>运费相关: 英国直邮相关商品价格为50元</p>
      <p>
        价格说明: 划线价、国内参考价、店头价可能是品牌专柜价,吊牌价或品牌商提供的指导价等价格,其受国内地区、时间和市场行情波动影响而可能与你购物时看到的不一致,该价格仅供参考.
      </p>
      <p>商品包装: 海外商品包装更换较为频繁,因此顾客你收到的货品有可能与图片不一致,页面图片及描述仅供参考,请你以最终收到的实物为准,由此给你带来的不便请你多谅解</p>
      <p>服务承诺: 阿拉灯承诺站内销售商品均为海外原装正品,并会持续为顾客们带来海外最新产品.</p>
    </div>
  </div>
  <ul id="bottom">
    <li>
      <img src="../../assets/shortProduct/productDetail/lineserve.png" alt="">
      <span>在线服务</span>
    </li>
    <li @click="addCar()">
      加入购物车
    </li>
  </ul>
  <!--服务说明-->
  <transition name="fade">
  <section v-show="isShow" id="server-show">
    <div id="opacity-black">

    </div>
    <ul class="server-instructions">
      <li>
        <span>服务说明</span>
        <img src="../../assets/shortProduct/productDetail/close.png" alt="" @click="server()" id="close">
      </li>
      <li>
        <p class="server-title">
          <img src="../../assets/shortProduct/productDetail/nosupport.png" alt="">
          <span class="server-name">不支持7天无忧退款</span>
        </p>
        <p class="server-content">
          该商品特殊性,一经售出不存在质量问题不享受7天无理由退款. 请在收到商品后在拆封或者试穿之前检查外观和附属物品.
        </p>
      </li>
      <li>
        <p class="server-title">
          <img src="../../assets/shortProduct/productDetail/fly.png" alt="">
          <span class="server-name">海外直邮</span>
        </p>
        <p class="server-content">
          下单之后英国直邮商品平均7-10个工作日发货,发货后平均12-20个工作日到货,特殊情况除外.包裹将有专业国际物流公司为你发货,无法送达的地方会转为其他物流.
        </p>
      </li>
      <li>
        <p class="server-title">
          <img src="../../assets/shortProduct/productDetail/zhengpin.png" alt="">
          <span class="server-name">正品保证</span>
        </p>
        <p class="server-content">
          本商品绝对正品保证
        </p>
      </li>
    </ul>
  </section>
  </transition>
</div>
</template>
<script>
  import Vue from 'vue'
  import HeaderThree from '../shortProduct/HeaderThree.vue'
  import * as $ from 'jquery'
  import * as Swiper from 'swiper'
  import 'swiper/dist/css/swiper.css'
//  import {mapGetters, mapActions} from 'vuex'
  export default {
    data() {
      return{
        sp:"商品详情",
        isPrice: true,
        price: 160,
        isShow: false,
        time: '今天15:00限量开抢',
        productDetail:{},
        discuss:[{
          content: '颜色涂上去看着很漂亮,棒棒哒',
          img: '',
          headImg: require('../../assets/shortProduct/productDetail/headImg.png'),
          name: '霜霜'
        },{
          content: '美美的!!!',
          img: '',
          headImg: require('../../assets/shortProduct/productDetail/headImg.png'),
          name: '爱美丽'
        },{
          content: '千万别卖,用过之后,才知道什么是后悔',
          img: '',
          headImg: require('../../assets/shortProduct/productDetail/headImg.png'),
          name: '狗鸡'
        }],
        pushGoods:[{
          img: require('../../assets/shortProduct/productDetail/product1.png'),
          name: '会呼吸丝滑蜜粉',
          price: 199
        },
          {
            img: require('../../assets/shortProduct/productDetail/product2.png'),
            name: 'BB矿物粉饼9g',
            price: 299
          },{
            img: require('../../assets/shortProduct/productDetail/product3.png'),
            name: '植萃腮红胭脂',
            price: 188
          }],
        productShow:[{
          img: require('../../assets/shortProduct/listImg2.png')
        },{
          img: require('../../assets/shortProduct/listImg2.png')
        }]
      }
    },
    components:{
      HeaderThree
    },
    computed:{
      getProductID() {
        return this.$route.params.id;
      },
      getProductPrice() {
        return this.$route.params.productPrice;
      },
      getIsPrice() {
        return this.$route.params.isPrice
      }
    },
//    created() {
//      console.log("ccc",this.getProductID);
//      Vue.axios.get("/goods/get",{params:{ID:this.getProductID}}).then((res)=>{
//        console.log(res.data)
//        this.productDetail = res.data[0];
//        console.log(this.productDetail.name);
//      })
//    },
    // 组件激活时使用
    activated() {
      Vue.axios.get("/goods/get",{params:{ID:this.getProductID}}).then((res)=>{
        console.log(res.data)
        this.productDetail = res.data[0];
        console.log('ccc', this.productDetail['num']);
        // 绑定swiper 使用$nextTick
        this.$nextTick(function () {
          new Swiper['default']('.swiper-container', {
            loop: true,
            autoplay:true,
            // 如果需要分页器
            pagination: {
              el: '#wrapper .swiper-pagination',
              type: 'bullets',
              clickable: true
//          bulletElement:'li'
//          type: 'custom'
//          bulletActiveClass: 'my-bullet-active'
            },
            observer:true,//修改swiper自己或子元素时，自动初始化swiper
            observeParents:true,//修改swiper的父元素时，自动初始化swiper
          })
        })

      })
    },
    methods:{
      server() {

        this.isShow = !this.isShow;
        console.log(this.isShow);
        if(this.isShow){
          $('#server-show').css({
            "width": $(window).width(),
            "height": $(window).height(),
            "position": 'fixed',
            "top": '0',
            "zIndex": 100
          })
        $('#server-show').on('touchmove',function(e){
          e.preventDefault();
//          return false;
        })
//          $('html').css({"height":"100%","overflow":"hidden"});$('body').css({"height":"100%","overflow":"hidden"});
        }else {
//          $('html').css({"overflow":"auto"});$('body').css({"overflow":"auto"});
        }
      },
      brandView() {
        this.$router.push({name:'productBrand', params:{brandName: this.productDetail.brand}});
      },
      allTips(){
        this.$router.push({name: 'allTips'});
      },
      addCar() {
        console.log(this.productDetail);
        this.$router.push({name:'shopCar',params:{product: JSON.stringify(this.productDetail), isPush: true}});
      }

    },

  }
</script>
<style scoped>
  /*@import "../../../node_modules/swiper/dist/css/swiper.css";*/
  #wrapper{
    position:  relative;
  }
  .swiper-pagination-bullet-active{
    background-color: red;
  }
  .swiper-container{
    width:100%;
    height: 20rem;
  }
  .swiper-slide {
    width: 100%;
    text-align: center;
  }
  .swiper-slide img{
    /*width: 100%;*/
    margin-top: 3.6rem;
    height: 12.8rem;
  }

  #snapTime-container{
    width:100%;
    height: 5rem;
    background-color: #e53e42;
  }
  #snapTime-container .snapTime{
    width: calc(100% - 2rem);
    height: 100%;
    margin: 0 auto;
    color: white;
  }
  .snapTime span:nth-child(1){
    display: inline-block;
    font-size: 1.5rem;
    line-height: 5rem;
    margin-right: 4.9rem;
  }
  .snapTime span:nth-child(2){
    font-size: 1.2rem;
    margin-right: 1rem;
  }
  .snapTime span:nth-child(3){
    display: inline-block;
    width:6rem;
    height: 2rem;
    font-size: 1.2rem;
    color: red;
    line-height: 2rem;
    text-align: center;
    background-color: white;
    border-radius: 2rem;
  }
  #price{
    width: calc(100% - 2rem);
    margin: 0 auto;
    padding-bottom: 0.5rem;
  }
  #price img{
    width: 2rem;
    vertical-align: top;
  }
  .detail{
    display: inline-block;
    font-size: 1.5rem;
    vertical-align: top;
  }
  .detail #font-red{
    color: #e53e42;
  }
  #price #oldPrice{
    font-size: 1.8rem;
    color: #e53e42;
  }
  #tariffs, #postage{
    font-size: 1.2rem;
    color: #4d4d4d;
  }
  #tariffs span{
    display: inline-block;
    width: 3rem;
    height: 1.2rem;
    font-size: 0.8rem;
    line-height: 1.2rem;
    color: #e53e42;
    text-align: center;
    border: 1px solid #e53e42;
  }
  /*积分够*/
  #integral{
    width:100%;
    height: 3rem;
    border-top: 1px solid #cccccc;
    border-bottom: 1px solid #cccccc;
  }
  #integral-title{
    width:calc(100% - 2rem);
    margin: 0 auto;
    margin-top: 0.8rem;
  }
  #integral-title img{
    width:3.5rem;
    vertical-align: middle;
  }
  #integral-title span{
    font-size: 1.2rem;
    color: #4d4d4d;
    margin-left: 1.5rem;
    vertical-align: middle;
  }
  /*不支持退款*/
  #conditions{
    width: 100%;
    height: 3rem;
    border-bottom: 1px solid #cccccc;
  }
  #conditions-title{
    width: calc(100% - 2rem);
    margin: 0 auto;
    display: flex;
  }
  #conditions-title li{
    text-align: center;
    font-size: 1rem;
    margin-top: 0.8rem;
    position: relative;
    flex: 1;
  }
  #conditions-title li>img{
    width: 1.5rem;
    vertical-align: middle;
  }
  #conditions-title li>span{
    vertical-align: middle;

  }
  #more{
    display: inline-block;
    position: absolute;
    top:-0.3rem;
    right: 0;
    font-size: 1.5rem;
    color: #808080;
  }
  /*添加地址*/
  #address-title{
    width: calc(100% - 2rem);
    margin: 0 auto;
    font-size: 1.5rem;
    color: #e53e42;
    position: relative;
    margin-top: 0.5rem;
  }
  #address{
    width: 100%;
    height: 5rem;
    overflow: hidden;
    box-shadow: 0px 1px 0px 0px
    #cccccc;
  }
  #address-title img{
    width: 2rem;
    vertical-align: top;
  }
  #address-title span:nth-child(1){
    vertical-align: top;
  }
  #address-title #toAdd{
    display: block;
    width: 4rem;
    height: 1.5rem;
    position: absolute;
    top:2.5rem;
    right: 0;
    font-size: 0.9rem;
    border: 1px solid #e53e42;
    border-radius: 0.1rem;
    text-align: center;
    vertical-align: 1.5rem;
  }
  #tian-f{
    width: 100%;
    height: 1rem;
    border-top: 1px solid #cccccc;
    background-color: rgb(242,242,242);
  }
  /*阿拉粉心得*/
  #a-la-fen{
    width:100%;
  }
  #a-la-fen-head{
    width: 100%;
    border-bottom: 1px solid #cccccc;
  }
  #a-la-fen-title{
    width: calc(100% - 2rem);
    margin: 0 auto;
    height: 3rem;
    position: relative;
  }
  #alTitle{
    display: inline-block;
    height: 1.5rem;
    font-size: 1.5rem;
    line-height: 1.5rem;
    color: #4d4d4d;
    border-left: 0.3rem solid #e53e42;
    margin-top: 0.75rem;
    padding-left: 0.5rem;
  }
  #alaMore{
    font-size: 1rem;
    color: #4d4d4d;
    position: absolute;
    top:0.75rem;
    right: 0;
  }
  #discuss{
    width: calc(100% - 2rem);
    margin: 0 auto;
    height: 12rem;
    display: flex;
    justify-content: space-between;
  }
  #discuss li{
    width: 31%;
    height: 10rem;
    /*flex: 1;*/
    margin-top: 1rem;
    border: 1px solid #cccccc;
    border-radius: 0.5rem;
    position: relative;
  }
  #discuss .discuss-content{
    position: absolute;
    top:1rem;
  }
  .discuss-bottom{
    position: absolute;
    left: 0.5rem;
    bottom: 1rem;
  }
  .discuss-bottom img{
    width: 2rem;
    vertical-align: middle;
  }
  .discuss-bottom span{
    vertical-align: middle;
  }
  .tian-f-two{
    width: 100%;
    height: 1.5rem;
    background-color: rgb(242,242,242);
  }
  /**/
  #brand{
    width: 100%;
    height: 10rem;
    position: relative;
    border-bottom: 1px solid #cccccc;
  }
  #brand-ul{
    width: calc(100% - 2rem);
    margin: 0 auto;
    margin-top: 1rem;
    position: relative;
  }
  #brand-ul li{
    display: inline-block;
    position: absolute;
  }
  #brand-ul li:nth-child(1) img{
    width: 3rem;
  }
  #brand-ul li:nth-child(2) {
    top:0;
    left: 4rem;
  }
  #brand-title{
    font-size: 1.4rem;
    color: #cccccc;
  }
  #brand-name{
    margin-left: 1rem;
    font-size: 1rem;
    color: #4d4d4d;
  }
  #brand-view-goods{
    font-size: 1rem;
    color: #4d4d4d;
  }
  #brand-num{
    font-size: 1.2rem;
    color: #e53e42;
  }
  #focusOn{
    width: 5rem;
    height: 1.5rem;
    text-align: center;
    font-size: 1rem;
    right: 1rem;
    border: 1px solid #e53e42;
    border-radius: 0.7rem;
    color: #e53e42;
    top:0.3rem;
  }
  #focusOn-jia{
    font-size: 1.8rem;
    position: absolute;
    top:-0.5rem;
    left: 0.9rem;
  }
  #focusOn span:nth-child(2){
    position: absolute;
    top:0.1rem;
    right: 0.8rem;
  }
  #brand-detail{
    width: calc(100% - 2rem);
    position: absolute;
    left: 1rem;
    bottom: 1rem;
  }
  #pushGoods,
  #a-la-fen-buy
  {
    width:calc(100% - 2rem);
    height: 14.5rem;
    margin: 0 auto;
    display: flex;
  }
  #pushGoods,
  #a-la-fen-buy{
    padding-bottom: 1rem;
  }
  #pushGoods li,
  #a-la-fen-buy li{
    flex: 1;
    margin-top: 1.5rem;
    text-align: center;
  }
  #pushGoods li>img,
  #a-la-fen-buy li>img{
    height: 7rem;
    margin-bottom: 1.8rem;
  }
  #pushGoods li,
  #a-la-fen-buy li{
    font-size: 1.2rem;
  }
  .pushGoods-name{
    color: #4d4d4d;
    margin-bottom: 0.7rem;
  }
  .pushGoods-price{
    color: #e53e42;
  }
  /*商品描述*/
  #productKinds{
    width: 100%;
  }
  #productKinds li{
    width:calc(100% - 2rem);
    margin: 0 auto;
  }
  #product-detail-title,
  #product-method-title,
  #productImgs,
  #alaBuy,
  #server-cn{
    height: 1.5rem;
    font-size: 1.5rem;
    line-height: 1.5rem;
    color: #4d4d4d;
    border-left: 0.3rem solid #e53e42;
    margin-top: 0.75rem;
    padding-left: 0.5rem;
  }
  .productShow{
    text-align: center;
    margin-bottom: 1rem;
  }
  .productShow img{
    height: 12.8rem;
  }
  #product-detail-content,
  #product-method-content{
    margin-top: 1rem;
    padding: 1rem 0;
    font-size: 1.2rem;
    color: #4d4d4d;
    border-top: 1px solid #cccccc;
    border-bottom: 1px solid #cccccc;
  }
  /*阿拉粉在买*/
  #alaBuyP{
    width: 100%;
  }
  #alaBuy,
  #server-cn{
    margin-left: 1rem;
  }
  #a-la-fen-buy{
    width: 100%;
    border-top: 1px solid #cccccc;
    margin-top: 1rem;
  }
  #server-ensure li>img{
    width: 3rem;
  }
  #server-ensure li:nth-child(4) img{
    width: 4rem;
  }
  #server{
    width:100%;
    height: 12.3rem;
  }
  #server-ensure{
    width: calc(100% - 2rem);
    margin: 0 auto;
    margin-top: 2rem;
    position: relative;
  }
  #server-ensure li{
    text-align: center;
    position: absolute;
    width: 25%;
  }
  #server-ensure li:nth-child(1){
    position: absolute;
    top:0;
    left:0;
  }
  #server-ensure li:nth-child(2){
    position: absolute;
    top:0;
    left:25%;
  }
  #server-ensure li:nth-child(3){
    position: absolute;
    top:0;
    left:50%;
  }
  #server-ensure li:nth-child(4){
    position: absolute;
    top:0.8rem;
    left:75%;
  }
  #server-ensure li>p{
    margin-top: 0.6rem;
  }
  #server-ensure li:nth-child(4)>p{
    margin-top: 1.2rem;
   }
  #server-line{
    width: 100%;
    margin-top: 1rem;
    border-top: 1px solid #cccccc;
  }
  #smallTips{
    background-color: #f2f2f2;
    padding-bottom: 1rem;
  }
  #tips{
    width: 100%;
    text-align: center;
  }
  #tips img{
    width: calc(100% - 9rem);
  }
  #smallTips-contnet{
    width: calc(100% - 2rem);
    margin: 0 auto;
    font-size: 1.2rem;
    color: #4d4d4d;
  }
  #smallTips-contnet p{
    margin-top: 1rem;
  }
  #bottom{
    display: flex;
    border-top: 1px solid #cccccc;
    border-bottom: 1px solid #cccccc;
  }
  #bottom li{
    flex: 1;
    text-align: center;
    font-size: 1.4rem;
    color: #4d4d4d;
    height: 5rem;
    line-height: 5rem;
  }
  #bottom li>img{
    height: 1.5rem;
  }
  #bottom li:nth-child(2){
    background-color: #e53e42;
    color: white;
  }
  /*服务说明*/
  /*#server-show{*/
    /*!*width: 100%;*!*/
    /*!*height: 35rem;*!*/
    /*background-color: red;*/
    /*position: fixed;*/
    /*bottom: 0;*/
  /*}*/
  #opacity-black{
    height: calc(100% - 30rem);
    background-color: black;
    opacity: 0.3;
    touch-action: none;
  }
  .server-instructions{
    height: 30rem;
    background-color: white;
    padding-left: 1rem;
    padding-right: 1rem;
    opacity: 1 !important;
    position: absolute;
    bottom: 0;
  }
  .server-instructions li:nth-child(1){
    font-size: 1.4rem;
    text-align: center;
    margin-top: 1rem;
    padding-bottom: 1rem;
    border-bottom:1px solid #cccccc ;
    position: relative;
  }
  .server-instructions li:nth-child(1) img{
    width:1.2rem;
    position: absolute;
    top:0.4rem;
    right: 0;
  }
  .server-instructions li:nth-child(2) img,
  .server-instructions li:nth-child(3) img,
  .server-instructions li:nth-child(4) img{
    width:1.5rem;
    vertical-align: middle;
  }
  .server-title{
    margin: 0.5rem 0;
  }
  .server-name{
    font-size: 1.4rem;
    color: #e53e42;
    vertical-align: middle;
  }
  .server-content{
    font-size: 1.2rem;
    color: #808080;
  }
  .server-instructions li:nth-child(3),
  .server-instructions li:nth-child(2){
    margin-bottom: 0.5rem;
  }
  .server-instructions li:nth-child(3),
  .server-instructions li:nth-child(4){
    border-top: 1px solid #cccccc;
  }
  .fade-enter, .fade-leave-to{
    opacity: 0;
  }
  .fade-enter-active, .fade-leave-active{
    transition: all 2s;
  }
</style>
